<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-11-18 11:58:53
 * @LastEditors: charles
 * @LastEditTime: 2021-11-18 14:31:29
-->
<template>
  <div class="chart">
    <h3>~{{title}}</h3>
    <div ref="root"></div>
  </div>
</template>
<script>
import {ref,onMounted,onUnmounted} from 'vue'
import { Line } from '@antv/g2plot';
export default {
  props:{
    title:String
  },
  setup(props) {
    const root = ref(null);

    let plot = null;
    const initChart = ()=>{
      plot = new Line(root.value,{
        data:[
          {year:"2021",value:10},
          {year:"2022",value:13},
          {year:"2023",value:19}
        ],
        xField:"year",
        yField:"value"
      })
      plot.render();
    }

    onMounted(initChart)
    onUnmounted(()=>{
      if(plot!=null){
        plot.destroy();
      }
    })

    return {
      root
    }
  },

}
</script>
<style lang="scss" scoped>
.chart {
  width:80%;
  margin: 0 auto;
}
</style>